<template>
	<view class="details-status-wrap">
		<navBar title="道路救援详情" :showHome="true" :showBack="true" marginLeft="30px" />
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="map">
				<map id="mapBox" style="width:100%; height:100%" :latitude="mapInfo.latitude"
					:longitude="mapInfo.longitude" :show-compass="true" :enable-rotate="true" :markers="covers"
					:controls="controls" :show-location="true" :enable-poi="true" :show-scale="true" :circles="circles"
					:polyline="polyline" :scale="scale">
				</map>
			</view>
			<view class="status-plane">
				<view class="plane-card">
					<view class="plane-header">
						<view class="plane-header-list">
							<view class="xy" @click="lookService">服务协议<u-icon name="arrow-right" size="25"></u-icon>
							</view>
							<view class="dw" @click="moveTolocation">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/dw.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="card-content">
						<view class="order-status" v-if="detailInfo.state != 4">
							<image v-if="detailInfo.state == 1"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state1.png"
								mode=""></image>
							<image v-if="detailInfo.state == 2"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state2.png"
								mode=""></image>
							<image v-if="detailInfo.state == 3"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state3.png"
								mode=""></image>
							<view class="status-name" v-if="detailInfo.state == 1">待派单</view>
							<view class="status-name" v-if="detailInfo.state == 2">待救援</view>
							<view class="status-name" v-if="detailInfo.state == 3">救援中</view>
							<view class="status-name" v-if="detailInfo.state == 4">待付款</view>
							<!-- <view class="status-name" v-if="detailInfo.state == 5">已完成</view> -->
							<view class="status-name" v-if="detailInfo.state == 6">救援已取消，再来一单吧</view>
							<view class="status-time" v-if="detailInfo.state == 1">{{ waitDispatchTime }}</view>
							<view class="status-time" v-if="detailInfo.state == 2">{{ waitRescueTime }}</view>
							<view class="status-time" v-if="detailInfo.state == 3">{{ rescueingTime }}</view>
						</view>
						<view class="title-p" v-if="detailInfo.state == 1">
							<view class="tip">您已成功提交订单</view>
							<view class="order-num">订单号：{{ detailInfo.code }}</view>
						</view>
						<view class="tip-pane" v-if="detailInfo.state == 1">
							若您的情况比较紧急，可直接联系<text class="txt"> 400 696 5399 </text>玲珑客服售后热线处理。
						</view>
						<view class="pay-info" v-show="detailInfo.state == 4">
							<uni-collapse>
								<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
								<uni-collapse-item title-border="none" :border="false">
									<template v-slot:title>
										<view class="pay-cell no-border">
											<view class="pay-label">费用合计</view>
											<view class="pay-content" style="color: #333333">
												￥{{ detailInfo.totalPayment }}</view>
										</view>
									</template>
									<view class="content">
										<view class="pay-cell">
											<view class="pay-label">维修服务费</view>
											<view class="pay-content" style="color: #333333">
												￥{{ detailInfo.serviceCharge }}</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
							<view class="pay-cell">
								<view class="pay-label">优惠券</view>
								<view class="pay-content">没有优惠券</view>
							</view>
							<view class="pay-status">
								<image v-if="detailInfo.state == 4"
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state4.png"
									mode=""></image>待付款
							</view>
							<view class="pay-count">￥{{ detailInfo.totalPayment }}</view>
							<view class="pay-tip">请尽快完成支付</view>
						</view>
						<view class="rate-list" v-show="detailInfo.state == 5">
							<view class="rate-list-header">
								本次服务<text class="red-bg">￥{{ detailInfo.totalPayment }}</text>，您已完成付款
							</view>
							<view class="rate-content">
								<view class="end-info">
									<u-icon name="checkmark-circle-fill" size="40" color="#CF1A1B"></u-icon>
									救援完成
									<view class="end-time"></view>
								</view>
								<view class="xq" @click="lookDetail">
									救援详情<u-icon name="arrow-right" size="30"></u-icon>
								</view>
							</view>
							<view class="rate-input">
								<u-rate :count="5" v-model="score" size="50" :readonly="isRate"></u-rate>
								<text v-if="score == 1">非常不好</text>
								<text v-if="score == 2">不好</text>
								<text v-if="score == 3">一般</text>
								<text v-if="score == 4">好</text>
								<text v-if="score == 5">非常好</text>
							</view>
							<view class="rate-text">
								<u--textarea height="180" v-model="evaluate" placeholder="亲，快来评价下本次服务体验吧，可以从服务态度等方面描述哦~"
									count :maxlength="100" :readonly="isRate" cursorSpacing="30"></u--textarea>
							</view>
						</view>
						<view class="store-info" v-if="detailInfo.state != 1&&detailInfo.state != 4&&detailInfo.state != 5">
							<view class="store-title"><u-icon name="map" size="40"></u-icon>{{ detailInfo.state == 6?'救援地址':'救援门店'}}</view>
							<view class="store-adress">
								<view class="store-name">{{ detailInfo.state == 6?detailInfo.rescueAddress:detailInfo.terminalDetail.terminalName}}</view>
								<view class="store-score" v-if="detailInfo.terminalDetail.score">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/kyzj-name.png">
									</image>
									<text
										class="score">{{ detailInfo.terminalDetail.score ? detailInfo.terminalDetail.score :'5.0' }}</text>
								</view>
							</view>
						</view>
						<view class="bottom-btn" v-if="detailInfo.state != 4&&detailInfo.state != 5">
							<u-button type="primary" text="取消订单" plain shape="circle" @click="openCancelOrderPop"
								v-if="detailInfo.state == 1"></u-button>
							<u-button type="primary" text="订单详情" plain shape="circle" @click="lookDetail"></u-button>
							<u-button type="primary" v-if="detailInfo.state == 6" color="#CF1A1B" shape="circle" text="再来一单" @click="goBack"></u-button>
							<u-button type="primary" v-if="detailInfo.state != 6" :text="detailInfo.state == 1?'联系客服':'拨打电话'" color="#CF1A1B"
								shape="circle"
								@click="callPhone(detailInfo.state == 1 ?'400-696-5399':detailInfo.terminalDetail.terminalPhone)"></u-button>
						</view>
						<view class="bottom-btn" v-else-if="detailInfo.state == 5">
							<text v-if="isRate">已评价，感谢您的评价</text>
							<u-button type="primary" color="#CF1A1B" shape="circle" text="提交"
								@click="rateOrder" v-else></u-button>
						</view>
						<view class="bottom-btn" v-else>
							<u-button type="primary" color="#CF1A1B" shape="circle" text="去支付" :loading="payLoading"
								@click="buyNow"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="cancelPop" @close="cancelPop=false" mode="bottom">
			<view class="cancel-pop">
				<view class="cancel-list">
					<u-radio-group v-model="driverReason" placement="column" >
						<view class="item" v-for="item in reasonList" @click="reasonHandle(item.code)">
							<view>{{item.name}}</view>
							<u-radio :name="item.code" label=" " size="30" activeColor="red" iconSize="25"
								shape="circle"></u-radio>
						</view>
					</u-radio-group>

				</view>
				<view class="pop-btn">
					<u-button type="primary" text="关闭" color="#CF1A1B" shape="circle" @click="cancelPop=false"
						plain></u-button>
					<u-button type="primary" text="确定" color="#CF1A1B" shape="circle" @click="cancelOrder"></u-button>
				</view>

			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import payment from '@/mixins/payment.js'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	export default {
		name: 'service-file',
		components: {
			navBar
		},
		mixins: [payment],
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		data() {
			return {
				mapInfo: {
					latitude: 22.53332,
					longitude: 113.93041
				},
				covers: [],
				mapContext: null,
				timer: null,
				circles: [],
				covers: [],
				polyline: [],
				currentId: '',
				waitRescueTime: '',
				reasonList: [],
				detailInfo: null,
				waitDispatchTime: '',
				rescueingTime: '',
				cancelPop: false,
				driverReason: '',
				payLoading: false,
				evaluate: '',
				score: 5,
				durationTime: 0,
				orderId: '',
				scale:15,
				isRate:false,
			}
		},
		mounted() {
			this.mapContext = uni.createMapContext("mapBox", this);
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			//切换原因
			reasonHandle(val){
				this.driverReason = val
			},
			//随机数生成
			roundNum(n) {
				var rnd = "";
				for (var i = 0; i < n; i++)
					rnd += Math.floor(Math.random() * 10);
				return parseInt(rnd);
			},
			// 初始化页面
			async initData() {
				clearInterval(this.timer)
				this.timer = null
				this.circles = []
				this.covers = []
				this.polyline = []
				this.scale = 10
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/getRoadRescueDetail',
						data: {
							id: this.currentId,
							userId: this.getUserInfo.id
						}
					})
					this.detailInfo = res.datas
					this.mapInfo.latitude = this.detailInfo.lat
					this.mapInfo.longitude = this.detailInfo.lng
					//待派单
					if (this.detailInfo.state == 1) {
						this.scale = 15
						this.getReason()
						let circlesObj = {
							id: this.roundNum(6),
							latitude: this.detailInfo.lat,
							longitude: this.detailInfo.lng,
							fillColor: "#e6060a6A", //填充颜色
							color: "#e6060a6A", //描边的颜色
							radius: 200, //半径
							strokeWidth: 3 //描边的宽度
						}
						this.circles.push(circlesObj)
						this.timer = setInterval(() => {
							this.waitDispatchTime = this.formatTime(this.detailInfo.createdTime)
							this.covers = [{
								id: this.roundNum(6),
								latitude: this.detailInfo.lat,
								longitude: this.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyzd.png',
								width: "40",
								height: "40",
								callout: { //marker气泡
									content: `待派单\n${this.waitDispatchTime}`,
									color: "#000",
									bgColor: "#fff",
									borderRadius: 4,
									fontSize: 12,
									textAlign: "center",
									padding: 6,
									display: 'ALWAYS',
								},
							}]
						}, 1000)

					}
					//待救援
					if (this.detailInfo.state == 2) {
						let startPiont = {
							id: this.roundNum(6),
							latitude: this.detailInfo.terminalDetail.lat,
							longitude: this.detailInfo.terminalDetail.lng,
							iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyqd.png',
							width: "40",
							height: "50"
						}
						this.covers.push(startPiont)
						this.timer = setInterval(() => {
							this.waitRescueTime = this.formatTime(this.detailInfo.dispatchTime)
						}, 1000)
						// 根据门店到救援点划线
						this.drawPolyline({
							lat: this.detailInfo.terminalDetail.lat,
							lng: this.detailInfo.terminalDetail.lng
						}, {
							lat: this.detailInfo.lat,
							lng: this.detailInfo.lng
						}, '#CF1A1B')
					}
					//救援中,待付款，已完成
					if (this.detailInfo.state == 3 || this.detailInfo.state == 4 || this.detailInfo.state == 5) {
						if (this.detailInfo.state == 3) {
							this.timer = setInterval(() => {
								this.rescueingTime = this.formatTime(this.detailInfo.rescueStartTime)
							}, 1000)

						}
						if (this.detailInfo.state == 5) {
							this.isRate = this.detailInfo.score?true:false
							this.score = this.detailInfo.score?this.detailInfo.score:5
							this.evaluate = this.detailInfo.evaluate
						}

						// 先设置终点位置
						if (this.detailInfo.state == 4) {
							this.covers = [{
								id: this.roundNum(6),
								latitude: this.detailInfo.lat,
								longitude: this.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
								width: "40",
								height: "50",
								callout: { //marker气泡
									content: `救援已完成\n${this.detailInfo.rescueEndTime}`,
									color: "#000",
									bgColor: "#fff",
									borderRadius: 4,
									fontSize: 12,
									textAlign: "center",
									padding: 6,
									display: 'ALWAYS',
								}
							}, ]

						} else {
							if (this.detailInfo.state == 3) {
								let totalTime = this.formatTime(this.detailInfo.dispatchTime, this.detailInfo
									.rescueStartTime)
								this.covers = [{
									id: this.roundNum(6),
									latitude: this.detailInfo.lat,
									longitude: this.detailInfo.lng,
									iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
									width: "40",
									height: "50",
									callout: { //marker气泡
										content: `师傅已到达\n共耗时${totalTime?totalTime.split(':')[0]:0}分钟`,
										color: "#000",
										bgColor: "#fff",
										borderRadius: 4,
										fontSize: 12,
										textAlign: "center",
										padding: 6,
										display: 'ALWAYS',
									}
								}]
							} else if(this.detailInfo.state == 5) {
								this.covers = [{
									id: this.roundNum(6),
									latitude: this.detailInfo.lat,
									longitude: this.detailInfo.lng,
									iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
									width: "40",
									height: "50",
									callout: { //marker气泡
										content: `救援已完成\n${this.detailInfo.rescueEndTime}`,
										color: "#000",
										bgColor: "#fff",
										borderRadius: 4,
										fontSize: 12,
										textAlign: "center",
										padding: 6,
										display: 'ALWAYS',
									}
								}]

							}else{
								this.covers = [{
									id: this.roundNum(6),
									latitude: this.detailInfo.lat,
									longitude: this.detailInfo.lng,
									iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
									width: "40",
									height: "50"
								}]
							}

						}


						// 根据门店到救援点划线，救援司机可以随时点击到达
						// rescueProjectScope:2-拖车救援
						if (this.detailInfo.rescueProjectScope == 2) {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.endLat ? this.detailInfo.endLat : this.detailInfo
									.terminalDetail.lat,
								longitude: this.detailInfo.endLng ? this.detailInfo.endLng : this.detailInfo
									.terminalDetail.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyend.png',
								width: "40",
								height: "50",
							})
							this.drawPolyline({
									lat: this.detailInfo.endLat ? this.detailInfo.endLat : this.detailInfo
										.terminalDetail.lat,
									lng: this.detailInfo.endLng ? this.detailInfo.endLng : this.detailInfo
										.terminalDetail.lng
								}, {
									lat: this.detailInfo.lat,
									lng: this.detailInfo.lng
								}, (this.detailInfo.state == 4 || this.detailInfo.state == 5) ? '#847f7f' :
								'#CF1A1B')
						} else {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.terminalDetail.lat,
								longitude: this.detailInfo.terminalDetail.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyqd.png',
								width: "40",
								height: "50",
							})
							if (this.detailInfo.terArriveLat) {
								this.drawPolyline({
									lat: this.detailInfo.terminalDetail.lat,
									lng: this.detailInfo.terminalDetail.lng
								}, {
									lat: this.detailInfo.terArriveLat,
									lng: this.detailInfo.terArriveLng
								}, '#847f7f')
								this.drawPolyline({
									lat: this.detailInfo.terArriveLat,
									lng: this.detailInfo.terArriveLng
								}, {
									lat: this.detailInfo.lat,
									lng: this.detailInfo.lng
								}, '#CF1A1B')
							} else {
								this.drawPolyline({
									lat: this.detailInfo.terminalDetail.lat,
									lng: this.detailInfo.terminalDetail.lng
								}, {
									lat: this.detailInfo.lat,
									lng: this.detailInfo.lng
								}, '#847f7f')
							}
						}


					}
					if (this.detailInfo.state == 6) {
						if (this.detailInfo.terminalDetail) {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.terminalDetail.lat,
								longitude: this.detailInfo.terminalDetail.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyqd.png',
								width: "40",
								height: "50",
							})
					
						} else {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.lat,
								longitude: this.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
								width: "40",
								height: "50",
								callout: { //marker气泡
									content: `救援已取消\n${this.detailInfo.updatedTime}`,
									color: "#000",
									bgColor: "#fff",
									borderRadius: 4,
									fontSize: 12,
									textAlign: "center",
									padding: 6,
									display: 'ALWAYS',
								}
							})
						}			
					}
				} catch (e) {

				}
			},
			//规划路线
			drawPolyline(fromLocation, toLocation, color) {
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				const self = this;
				var fromLocation = {
					latitude: fromLocation.lat,
					longitude: fromLocation.lng
				};
				var toLocation = {
					latitude: toLocation.lat,
					longitude: toLocation.lng
				};
				qqmapsdk.direction({
					mode: 'driving',
					from: fromLocation,
					to: toLocation,
					heading: 90,
					accuracy: 5,
					road_type: 6,
					success: function(res) {
						var coors = res.result.routes[0].polyline;
						var pl = []; // 点串数组
						// 坐标解压(返回的点串坐标，通过前向差分进行压缩)
						var kr = 1000000;
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						// 将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							});
						}
						self.durationTime = res.result.routes[0].duration
						if (self.detailInfo.state == 2) {
							let endPiont = {
								id: self.roundNum(6),
								latitude: self.detailInfo.lat,
								longitude: self.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
								width: "40",
								height: "40",
								callout: { //marker气泡
									content: `待救援\n预计${self.durationTime}分钟后到达`,
									color: "#000",
									bgColor: "#fff",
									borderRadius: 4,
									fontSize: 12,
									textAlign: "center",
									padding: 6,
									display: 'ALWAYS',
								}
							}
							self.covers.push(endPiont)
						}
						self.polyline.push({
							points: pl,
							color: color,
							width: 8,
							arrowLine: false
						})
					}.bind(this),
					fail: function(error) {
						console.log(error);
					}
				});
			},

			//设置等待时间
			formatTime(startTime, endTime) {
				var date1 = new Date(startTime.replace(/-/g, '/')).getTime()
				var date2 = endTime ? new Date(endTime.replace(/-/g, '/')).getTime() : new Date().getTime();
				var date3 = date2 - date1;
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				if (days < 0) {
					days = days * (-1)
				}
				var leave1 = date3 % (24 * 3600 * 1000);
				var hours = Math.floor(leave1 / (3600 * 1000));
				var leave2 = leave1 % (3600 * 1000);
				var minutes = Math.floor(leave2 / (60 * 1000));
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				return (days > 0 ? days + "天 " : '') + (hours == 0 ? '' : (hours < 10 ? '0' + hours : hours) + ":") + (
					minutes < 10 ? '0' +
					minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds)
			},
			//获取取消原因
			async getReason() {
				try {
					const res = await this.$request({
						url: '/user-center/ter-terminal/get-dict-by-code',
						data: {
							code: 'driver_reason',
							pageNum: 1,
							pageSize: 100
						}
					})
					this.reasonList = res.datas
				} catch (e) {

				}
			},

			//查看服务协议
			lookService() {
				uni.navigateTo({
					url: '/rescuePack/serviceFile/index'
				})
			},
			//移动到当前定位位置
			moveTolocation() {
				this.mapContext.moveToLocation({
					complete: res => {
						console.log('移动完成:', res)
					}
				})
			},
			//电话
			callPhone(val) {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: val
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: val,
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: val
								})
							}
						}
					})
				}
			},
			//打开取消原因弹窗
			openCancelOrderPop() {
				this.cancelPop = true
			},
			//取消订单
			async cancelOrder() {
				if (!this.driverReason) {
					this.$refs.uToast.show({
						type: 'default',
						message: '请选择取消原因！'
					})
					return false
				}
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/cancellationRoadRescue',
						data: {
							driverReason: this.driverReason,
							id: this.currentId,
							type: 1,
							userId: this.getUserInfo.id
						}
					})
					this.$refs.uToast.show({
						type: 'default',
						message: '已取消该订单！'
					})
					this.cancelPop = false
					this.initData()

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
				}
			},
			//查看详情
			lookDetail() {
				uni.navigateTo({
					url: `/rescuePack/rescueDetail/index?id=${this.currentId }&type=1`,
				})
			},
			//立即支付
			async buyNow() {
				this.payLoading = true
				uni.showLoading({
					title: '网络请求中'
				})
				try {
					// 提交订单
					const {
						datas
					} = await this.$request({
						url: '/order-center/road/rescue/roadRescuePayment',
						data: {
							id: this.detailInfo.id,
							actualPayment: this.detailInfo.totalPayment,
						}
					})
					this.orderId = this.detailInfo.id
					this.payLoading = false
					uni.hideLoading()
					// // 跳转拉卡拉支付
					this.toPay(datas.counterUrl, {
						paySuccessRedirectURL: '/rescuePack/rescuePaySuccess/index',
						isHadPaymentAPI: '/order-center/road/rescue/getPayDetail',
						type: 'rescue'
					})
				} catch (err) {
					this.payLoading = false
					uni.hideLoading()
					this.$refs.uToast.show({
						message: err.respMsg || '创建订单失败',
						position: 'top'
					})
				}
			},
			//评价订单
			async rateOrder() {
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/roadRescueEvaluate',
						data: {
							id: this.detailInfo.id,
							score: this.score,
							evaluate: this.evaluate,
							userId: this.getUserInfo.id,
						}
					})
					this.$refs.uToast.show({
						type: 'default',
						message: '感谢您的评价！'
					})
					this.initData()

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
				}
			},
		},
		onShow() {},
		onLoad(option) {
			this.currentId = option.id
			this.initData()
		},
		onUnload(){
			this.timer = null
			clearInterval(this.timer)
		},
	}
</script>

<style scoped lang="scss">
	.details-status-wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.cancel-pop {
			padding: 20rpx 24rpx;

			.cancel-list {
				.item {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 26rpx;
					align-items: center;
					border-bottom: 2rpx solid #eee;
				}
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				/deep/ .u-button {
					width: 45% !important;
				}
			}
		}

		.rate-pop {
			padding: 20rpx 24rpx;

			.rate-source {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 24rpx;
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				/deep/ .u-button {
					width: 45% !important;
				}
			}
		}
	}

	.content-box {
		height: calc(100% - 128rpx);
		background: #fff;
		position: relative;

		.map {
			width: 100%;
			height: 100%;
		}

		.status-plane {
			position: absolute;
			bottom: 20rpx;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			background: transparent;

			.plane-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx;
				position: relative;

				.plane-header {
					position: absolute;
					width: 100%;
					top: -58rpx;
					left: 0;

					.plane-header-list {
						display: flex;
						justify-content: space-between;

						.xy {
							width: 180rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 12px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.dw {
							width: 48rpx;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

					}
				}

				.card-content {
					.rate-list {
						margin-bottom: 20rpx;

						.rate-list-header {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							border-bottom: 1px solid #eee;
							padding-bottom: 24rpx;
							margin-bottom: 20rpx;

							.red-bg {
								color: #CF1A1B;
								font-weight: bold;
							}
						}

						.rate-input,
						.rate-text {
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
						}

						.rate-content {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 20rpx;
							border-bottom: 1px solid #eee;
							padding-bottom: 24rpx;

							.end-info {
								display: flex;
								align-items: center;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;

								/deep/ .u-icon {
									margin-right: 20rpx;
								}

								.end-time {
									font-size: 24rpx;
									margin-left: 20rpx;
									color: #999999;
								}
							}

							.xq {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								margin-left: 20rpx;
								color: #999999;

								/deep/ .u-icon {
									margin-left: 20rpx;
								}
							}
						}
					}

					.order-status {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #333333;
						margin-bottom: 20rpx;

						image {
							width: 38rpx;
							height: 42rpx;
							margin-right: 20rpx;
						}

						.status-name {
							margin-right: 20rpx;
						}
					}

					.title-p {
						margin-bottom: 20rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						.order-num {
							margin-top: 10rpx;
						}
					}

					.tip-pane {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						background: #FAFAFA;
						border-radius: 8rpx;
						padding: 20rpx;
						margin-bottom: 20rpx;

						.txt {
							color: #CF1A1B;
							font-weight: bold;
							margin: 0 5rpx;
						}
					}

					.store-info {
						background: #FAFAFA;
						border-radius: 8rpx;
						padding: 20rpx;
						margin-bottom: 20rpx;

						.store-title {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 20rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							/deep/ .u-icon {
								margin-right: 20rpx;
							}
						}

						.store-adress {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.store-name {
								font-size: 32rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								width: calc(100% - 180rpx);
								word-wrap: break-all;
								overflow: hidden;
								line-break: anywhere;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.store-score {
								display: flex;
								align-items: center;
								color: #CF1A1B;
								font-weight: bold;

								image {
									width: 112rpx;
									height: 28rpx;
									margin: 0 6rpx;
								}

							}

						}
					}

					.bottom-btn {
						display: flex;
						align-items: center;
						justify-content: center;

						/deep/ .u-button {
							margin: 0 20rpx;
						}

					}

					.pay-info {
						margin-bottom: 20rpx;

						/deep/ .uni-collapse-item__title {
							border-bottom: 2rpx solid #eee;
						}

						.pay-cell {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 2rpx solid #eee;
							padding: 20rpx 12rpx;

							.pay-label {
								width: 200rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							}

							.pay-content {
								width: calc(100%- 224rpx);
								display: flex;
								justify-content: flex-end;
								align-items: center;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}

						.no-border {
							border: none;
						}

						.pay-status {
							display: flex;
							justify-content: center;
							font-size: 18px;
							font-weight: bold;
							margin-bottom: 20rpx;
							margin-top: 80rpx;

							image {
								width: 38rpx;
								height: 42rpx;
								margin-right: 20rpx;
							}
						}

						.pay-count {
							font-size: 16px;
							font-weight: bold;
							text-align: center;
							margin-bottom: 20rpx;
						}

						.pay-tip {
							font-size: 12px;
							text-align: center;
							margin-bottom: 20rpx;
							color: #999999;
						}

					}
				}
			}

		}
	}
</style>